import React from 'react';
import { API } from 'src/typings';
import axios from '_axios@0.21.1@axios';
import TitleBar from '../../components/titlebar';
import empty from '../../assets/empty.svg';
import API_ROOT from '../../api/network';
import { Link } from "react-router-dom";
import Search from '../../components/search';
import UserList from '../../components/user-list';
import PageButton from 'src/components/page-button';
import './index.css';

type IndexState = {
    pageResult: API.PageResult<API.User>,
    params: {
        offset: number,
        size: number,
        query: string,
        active: boolean,
        deleted: boolean
    }
}


type IndexProps = {

}


function UserListFunc(props: any) {
    const userList: Array<JSX.Element> = [];

    props.users.forEach((user: API.User, i) => {
        userList.push(
            <Link to={`/details/${user.id}`} className="to-details" key={i}>
                <UserList user={user} />
            </Link>
        )
    })

    if (userList.length === 0) {
        return <img src={empty} alt="啥都木有" className="empty-image" />
    }

    return <div className="user-lists">
        {userList}
    </div>;
}


export default class Index extends React.Component<IndexProps, IndexState> {
    state = {
        pageResult: {
            total: 0,
            hasNext: true,
            data: []
        },
        params: {
            offset: 0,
            size: 5,
            query: '',
            active: true,
            deleted: false
        }
    }


    getPageData(offset: number, params: any) {
        axios.request({
            url: `${API_ROOT}/users`,
            params: params
        }).then(res => {
            let pageResult: API.PageResult<API.User> = res.data;
            this.setState({
                pageResult: pageResult
            })
        }).catch(err => {

        })
    }

    changeSearchText = (text: string) => {
        this.setState({
            params: {
                query: text,
                offset: this.state.params.offset,
                active: this.state.params.active,
                deleted: this.state.params.deleted,
                size: this.state.params.size
            }
        })
    }

    search = (e: any) => {
        this.getPageData(0, this.state.params);
    };

    componentDidMount() {
        this.getPageData(0, this.state.params);
    }

    toggleActiveState = (active: boolean) => {
        let params = {
            query: this.state.params.query,
            offset: this.state.params.offset,
            active: active,
            deleted: this.state.params.deleted,
            size: this.state.params.size
        }
        this.setState({
            params: params
        })
        this.getPageData(0, params);
    }

    toggleDeletedState = (deleted: boolean) => {
        let params = {
            query: this.state.params.query,
            offset: this.state.params.offset,
            active: this.state.params.active,
            deleted: deleted,
            size: this.state.params.size
        }
        this.setState({
            params: params
        })
        this.getPageData(0, params);
    }

    render() {
        return <div>
            <TitleBar title="用户列表"></TitleBar>
            <div className="index-container">

                <Search active={this.state.params.active}
                    deleted={this.state.params.deleted}
                    invokeSearchMethod={this.search}
                    changeSearchText={this.changeSearchText}
                    toggleActive={this.toggleActiveState}
                    toggleDeleted={this.toggleDeletedState}></Search>
                <div className="header-bar">
                    <div className="user-avatar item">
                        头像
                    </div>
                    <div className="username item">
                        用户名
                    </div>
                    <div className="nickname item">
                        昵称
                    </div>
                    <div className="gender item">
                        性别
                    </div>
                    <div className="birthday item">
                        出生日期
                    </div>
                    <div className="create-time item">
                        创建时间
                    </div>

                    <div className="update-time item">
                        上次编辑时间
                    </div>

                    <div className="active item">
                        是否启用
                    </div>

                    <div className="deleted item">
                        是否删除
                    </div>

                    <div className="edit item">
                        编辑
                    </div>
                </div>
                <UserListFunc users={this.state.pageResult.data} />
                <PageButton />
            </div>;
        </div>

    }
}